<template>
  <div>
    <el-dialog :visible.sync="isShow" :title="$t('member_status_change_history')" width="1000px">
      <el-table
        :data="listData"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          :label="$t('change_time')"
          prop="updateTime"
          align="center"
          width="200"
        />

        <el-table-column
          :label="$t('operator')"
          prop="operatorName"
          align="center"
          width="120"
        />

        <el-table-column
          :label="$t('change')"
          align="center"
        >
          <template slot-scope="{row}">
            {{ statusMap[row.fromStatus] }} >  {{ statusMap[row.toStatus] }}
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('change_type')"
          align="center"
        >
          <template slot-scope="{row}">
            <span> {{ $t(CHANGE_TYPE_MAP[row.reasonType]) }} </span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('change_reason')"
          align="center"
        >
          <template slot-scope="{row}" >
            <span v-if="row.reason"> {{ row.reason }}</span>
            <span v-else :title="row.allRules">
              {{ row.firstRuleGroupName }} {{ row.ruleGroupNameList.length>1?"...":'' }}
            </span>
          </template>
        </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">{{ $t('close') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CHANGE_TYPE_MAP } from '@/constants/index.js'

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      CHANGE_TYPE_MAP,
      statusMap: {
        GREY: this.$t('grey_list'),
        BLACK: this.$t('black_list'),
        NORMAL: this.$t('normal'),
        NOTSURE: this.$t('suspicious_situation'),
        WHITE: this.$t('white_list'),
        GREYANDBLACK: this.$t('blacklist_or_grey_list')
      }
    }
  },

  computed: {
    isShow: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    }
  },
}
</script>
